<template>
  <div id="centerRight1">
    <dv-scroll-board class="dv-scr-board" :config="config" />
  </div>
</template>

<script>
export default {
  props: {
    AnalyseAloneList1: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      config: {
        header: [
        this.$t('page2.table.header.machineNumber'),
          this.$t('page2.table.header.currentStatus'),
          this.$t('page2.table.header.operatingRate'),
          this.$t('page2.table.header.runningHours'),
          this.$t('page2.table.header.idleHours'),
          this.$t('page2.table.header.failureHours'),
        ],
        data: [],
        rowNum: 2, //表格行数
        headerHeight: 30,
        headerBGC: "", //表头
        oddRowBGC: "#14314d", //奇数行
        evenRowBGC: "", //偶数行
        align: ["center", "center", "center", "center", "center", "center"],
      },
    };
  },
  watch: {
    AnalyseAloneList1: {
      handler(newVal) {
        this.AnalyseAloneList1 = newVal;
        this.getdata();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getdata() {
      let data = [];
      this.AnalyseAloneList1.forEach((item) => {
        if (item.state == 0) {
          data.push([
            item.equipmentCode,
            `<span style="color: #ffbe00;">${this.$t('page2.table.status.idle')}</span>`,
            parseFloat(
              (
                (item.onTime /
                  (item.onTime + item.offTime + item.noTime + item.ngTime)) *
                  100 || 0.0
              ).toFixed(2)
            ) + "%",
            parseFloat(item.onTime / 3600).toFixed(1),
            parseFloat(item.noTime / 3600).toFixed(1),
            parseFloat(item.ngTime / 3600).toFixed(1),
          ]);
        } else if (item.state == 1) {
          data.push([
            item.equipmentCode,
            `<span style='color:#11ff9d'>${this.$t('page2.table.status.running')}</span>`,
            parseFloat(
              (
                (item.onTime /
                  (item.onTime + item.offTime + item.noTime + item.ngTime)) *
                  100 || 0.0
              ).toFixed(2)
            ) + "%",
            parseFloat(item.onTime / 3600).toFixed(1),
            parseFloat(item.noTime / 3600).toFixed(1),
            parseFloat(item.ngTime / 3600).toFixed(1),
          ]);
        } else if (item.state == 2) {
          data.push([
            item.equipmentCode,
            `<span style="color: #e31e15;">${this.$t('page2.table.status.failure')}</span>`,
            parseFloat(
              (
                (item.onTime /
                  (item.onTime + item.offTime + item.noTime + item.ngTime)) *
                  100 || 0.0
              ).toFixed(2)
            ) + "%",
            parseFloat(item.onTime / 3600).toFixed(1),
            parseFloat(item.noTime / 3600).toFixed(1),
            parseFloat(item.ngTime / 3600).toFixed(1),
          ]);
        } else {
          data.push([
            item.equipmentCode,
            `<span style="color: #4d4d4d;">${this.$t('page2.table.status.downtime')}</span>`,
            parseFloat(
              (
                (item.onTime /
                  (item.onTime + item.offTime + item.noTime + item.ngTime)) *
                  100 || 0.0
              ).toFixed(2)
            ) + "%",
            parseFloat(item.onTime / 3600).toFixed(1),
            parseFloat(item.noTime / 3600).toFixed(1),
            parseFloat(item.ngTime / 3600).toFixed(1),
          ]);
        }
      });
      this.config.data = data;
      this.config = { ...this.config };
    },
  },
  mounted() {
    this.getdata();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .dv-scroll-board {
  height: 11vh;
  .header {
    font-size: 14px;
    color: #85acef !important;
    text-align: center;
  }
  .rows {
    .row-item {
      color: #c6d9f8;
      font-size: 15px;
    }
  }
}
</style>
